<template>
    <div id="parent">
        <h3>父组件</h3>
        <button @click="fn">修改插槽名字</button>
        <Ch :data="data">
            <template v-slot="slot_props">
                <p :style="{ color: slot_props.aaa.color }">
                    {{ slot_props.aaa.name }}
                </p>
                <p :style="{ color: slot_props.aaa.color }">
                    {{ slot_props.aaa.age }}
                </p>
            </template>
        </Ch>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, isRef, isReactive, reactive } from "vue"
import Ch from "./components/Ch.vue"
import useInfoStore from "./store/modules/info"
import useDemoStore from "./store/modules/demo"
export default defineComponent({
    name: "App",
    components: { Ch },
    setup() {
        const data = reactive([
            { name: "刘德华", age: 50, color: "red" },
            { name: "周星驰", age: 40, color: "pink" },
        ])
        let name:any = ref("a");
        function fn() {
            name.value = "b"
        }

        return {
            data,
            name,
            fn
        }
    },
})
</script>

<style>
#parent {
    width: 400px;
    height: 400px;
    border: 2px solid yellowgreen;
}
</style>
